<!--
 * @Description: 基本信息
 * @Author: seadon
 * @LastEditors: zhaoxiaoyang zhaoxiaoyang@byteluck.com
 * @Date: 2021-07-10 17:33:44
 * @LastEditTime: 2023-09-08 11:16:59
-->
<template>
	<div
		class="user-info"
		:class="{ 'user-info-box': processValue && !informationValue }"
	>
		<div class="task-box">
			<div ref="userInfoRef" class="task-box-content">
				<template v-for="(item, index) in userList" :key="index">
					<div
						v-if="item.show"
						class="content-item"
						@click="toPath(item)"
						:class="{ 'content-item-box': processValue && !informationValue }"
					>
						<div class="tasks-box-img">
							<a-badge
								:count="countData[item.count]"
								class="content-item-badge"
							>
								<img
									:src="path.getFullPath('/icon/' + item.img + '.svg')"
									alt="avatar"
								/>
							</a-badge>
						</div>

						<div class="tasks-box-text">
							<EllipsisTooltip :title="item.text" />
							<i class="low-code iconjiantou text-icon"></i>
						</div>
					</div>
				</template>
			</div>
		</div>
		<div v-show="showLeft" class="task-box-left" @click="transformHandle">
			<i class="low-code iconleft"></i>
		</div>
		<div v-show="showRight" class="task-box-right" @click="transformHandle">
			<i class="low-code iconxiangyou"></i>
		</div>
	</div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, unref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import { iframePostMessage, isInnerIframePage } from '@/utils/tabInnerPage'

import { path } from '@/utils'
import { userInfoList } from './constant'
import { client } from '@/utils'
import useModel from './useModel'
import './index.less'
const appLauncher = computed(
	() => store.state.tenant?.tenant_auth?.app_launcher === 1
)
const store = useStore()
const processValue = computed(() => store.state.tenant.process_quick_entry)
const informationValue = computed(() => store.state.tenant.information_module)

const { countData, fetchTaskCount } = useModel()

const userInfoRef = ref()
const isShow = ref(true)
const tenantDetail = computed(() => store.state.tenant)
const userList = ref()
watch(
	() => countData.value,
	value => {
		userList.value = userInfoList.map(item => {
			if (
				item.name === 'ExpactTask' &&
				!tenantDetail.value.tenant_auth?.forecase_task
			) {
				item.show = false
			}
			if (item.name === 'AgentTodo' && !value[item.count]) {
				item.show = false
			}
			if (item.name === 'AgentNotice' && !value[item.count]) {
				item.show = false
			}
			return item
		})
	},
	{
		deep: true,
	}
)

const showRight = computed(
	() =>
		(unref(countData)?.agent_todo_task_count ||
			unref(countData)?.agent_un_read_notice_count) &&
		unref(isShow) &&
		tenantDetail.value.tenant_auth?.forecase_task
)
const showLeft = computed(
	() =>
		(unref(countData)?.agent_todo_task_count ||
			unref(countData)?.agent_un_read_notice_count) &&
		!unref(isShow) &&
		tenantDetail.value.tenant_auth?.forecase_task
)

const transformHandle = () => {
	userInfoRef.value.style.left = isShow.value
		? processValue.value && !informationValue.value
			? '-310px'
			: '-446px'
		: '0'
	isShow.value = !isShow.value
}

const router = useRouter()
const toPath = (item: any) => {
	if (isInnerIframePage()) {
		iframePostMessage(
			{
				type: 'processcenter',
				sapp_type: 'processcenter',
				processcenter_name: item.name,
			},
			'appCenter'
		)
	} else {
		router.push({
			name: 'process_center',
			params: {
				name: item.name,
			},
		})
	}

	localStorage.setItem('activeProcessKey', item.name)
}
onMounted(() => {
	fetchTaskCount()
})
</script>
